﻿@{
    ViewBag.Title = "Quản lý sản phẩm";
    Layout = "~/Areas/Admin/Views/Shared/__AdminLayout.cshtml";

    IList<Sealight.Core.DataAdapter.product_category> categories = Sealight.UI.WebUI.Services.ProductService.GetAllProductCategory();
}
<style type="text/css">
    .form-actions
    {
        padding-top: 1em;
        overflow: hidden;
    }
    
    .form-actions button
    {
        float: right;
    }
    
    .t-group
    {
        border-width: 1px;
        border-style: solid;
        padding: 0 1em 1em;
    }
</style>
@{ Html.Telerik().ScriptRegistrar().OnDocumentReady(@<text> $('.t-button').live('mouseenter',
    $.telerik.buttonHover) .live('mouseleave', $.telerik.buttonLeave);
    </text>); 
}
<script type="text/javascript">

    $(function () {
        $('input').bind('keypress', function (e) {
            if (e.keyCode == 13) {
                search();
            }
        });
        $('#btnSearch').click(function () {
            search();
        });

    });
    function search() {

        var params = {
            keyword: $('#keyword').val(),
            category: $('#category').val()
        };

        var grid = $('#ResultsProduct').data('tGrid');
        grid.rebind(params);

    }

</script>
<h2>
    Quản lý sản phẩm</h2>
<div class="options">
    <input type="button" onclick="location.href='/admin/product/AddUpdateProduct'" value="Add new"
        id="btnAddNew" class="adminButtonBlue" title="Thêm mới sản phẩm"/>
</div>
<div style="padding-top: 20px;">
        <table width="100%">
            <tbody>
                <tr>
                    <td class="adminTitle">
                        <span id="" title="A product name.">Tên sản phẩm:</span>
                    </td>
                    <td class="adminData">
                        <input name="keyword" type="text" id="keyword" class="adminInput" />
                    </td>
                </tr>
                <tr>
                    <td class="adminTitle">
                        <span id="" title="Search by a specific category.">Loại:</span>
                    </td>
                    <td class="adminData">
                        <select name="category" id="category" class="adminInput">
                            <option selected="selected" value="0">All</option>
                            @if (categories != null)
                            {
                                foreach (var cat in categories)
                                {
                                    if (cat.id.ToString() == Model)
                                    {
                                <option value="@cat.id" selected>@cat.name</option> 
                                    }
                                    else
                                    {
                                <option value="@cat.id">@cat.name</option> 
                                    }
                                    if (cat.childrens != null)
                                    {
                                        foreach (var child in cat.childrens)
                                        {
                                            if (child.id.ToString() == Model)
                                            {
                                <option value="@child.id" selected>--@child.name</option>  
                                            }
                                            else
                                            {
                                <option value="@child.id">--@child.name</option>  
                                            }
                                        }
                                    }
                                }
                            }
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
        <div style="float: left;">
            <input type="button" value="Search" id="btnSearch" class="adminButtonBlue"/>
        </div>
        <div style="clear: both;">
        </div>
        <div>
            <div>
                @(Html.Telerik().Grid<Sealight.Core.DataAdapter.product>().Name("ResultsProduct")
.Columns(columns =>
{
    columns.Bound(o => o.id).Hidden();
    columns.Bound(o => o.name).Width(200).Title("Tên sản phẩm");
    columns.Bound(o => o.id_string).ClientTemplate("<a  href=\"/admin/product/AddUpdateProduct/<#=id_string#>\" >Sửa</a>").Title("").Width(50);

}).DataBinding(dataBinding =>
            dataBinding.Ajax().
Select("_SearchProductAjax", "Product", new { keyword = ViewData["keyword"], category = ViewData["category"] }).
                Enabled(true))
        .Scrollable(scrolling => scrolling.Enabled(true))       
        .Pageable(paging => paging.Enabled(true))

        )
            </div>
        </div>

</div>
